<template>
  <view>
    <view class="d-flex d-flex-between px-2 d-flex-middle pt-2 ">
      <view class="searchBox bg-fff px-3 rounded20 d-flex-item d-flex d-flex-middle">
        <input v-model="formData.name" class="pl-1 rounded10 font30 d-flex-item" placeholder="课程名称"
               placeholder-class="colorhold"/>
        <text v-if="formData.name" class="text-right iconfont icon-jiufuqianbaoicon08 main-color ml-1"
              @click="dataCancel"></text>
        <text class="iconfont icon-icon_sousuo main-color font40  text"></text>
      </view>
    </view>

    <view class="cateBox">
      <view class="cate-left">
        <view class="cate-left-item" v-for="(item,index) in cateType" :key="item.id" @click="changeCate(item,index)">
          <view class="cate-left-curr" v-if="curr == index"></view>
          <text class="font26" :class="{'colorlan':curr == index}">{{ item.name }}</text>
        </view>

      </view>

      <view class="cate-right">

        <view class="cate-right-item d-flex d-flex-middle d-flex-between" v-for="cnt in content" :key="cnt.id"
              @click="goUrl(`/subPages/homeSearch/homeSearch?category_id =${cnt.id}`)">
          <text>{{ cnt.name }}</text>
          <text class="iconfont icon-youjiantou color999"></text>
        </view>

      </view>
    </view>
  </view>
</template>

<script>
import {homeApi} from "@/http/homeApi";
import {mapState} from "vuex"

export default {
  data() {
    return {
      cateType: [],
      content: [],
      curr: 0,
      formData: {
        name: ''
      }
    }
  },
  onLoad() {
    this.goAllCategories()
  },
  computed: {
    ...mapState({
      loginState: state => state.loginState,
    })
  },
  methods: {
    async goAllCategories() {
      let res = await homeApi.getAllCategories()
      this.cateType = res;
      this.content = res[this.curr].children
      console.log(res, 'res')
    },
    funcTit() {
      uni.showToast({
        title: '功能开发中...',
        icon: 'none'
      })
    },
    changeCate(item, index) {
      let that = this
      that.curr = index
      uni.showLoading({
        title: '操作中...'
      })
      setTimeout(() => {
        uni.hideLoading()
        this.content = item.children
      }, 500)
    },
    goUrl(urlPages, tab) {
      if (!this.loginState) {
        uni.showToast({
          title: '未登录，请先登录！',
          icon: 'none'
        })
        setTimeout(() => {
          uni.navigateTo({
            url: '/subPages/login/login'
          })
        }, 1500)
      } else {

        uni.navigateTo({
          url: urlPages
        })
      }
    }
    ,
  }
}
</script>

<style scoped>
.searchBox {
  background-color: #fff;
  height: 80rpx;
  line-height: 80rpx;
}

.searchBox input {
  height: 100%;
}

.cateBox {
  position: absolute;
  top: 116rpx;
  bottom: 20rpx;
  width: 750rpx;
  left: 0;
  right: 0;
  display: flex;
}

.cate-left {
  width: 170rpx;
  background: #f5f5f7;
  height: 100%;
}

.cate-left-item {
  text-align: center;
  height: 90rpx;
  line-height: 90rpx;
  color: #666;
  position: relative;
}

.cate-left-curr {
  position: absolute;
  width: 4rpx;
  height: 35rpx;
  background-color: #3a84fc;
  left: 0;
  top: 27rpx;
}

.cate-right {
  flex: 1;
  padding-left: 25rpx;
  padding-right: 25rpx;
}

.cate-right-item {
  height: 90rpx;
  background-color: #f5f5f7;
  color: #303133;
  padding-left: 25rpx;
  padding-right: 25rpx;
  border-radius: 10rpx;
  margin-bottom: 20rpx;
}
</style>
